<template>
  <div class="lin-container">
    <div class="lin-wrap">
      <div class="wrap-label">
        <span class="label">列表</span>
        <div class="operatiion">
          <el-button type="primary" size="small" @click="handleClick('新增')">新增</el-button>
        </div>
      </div>
      <el-table
        ref="table"
        class="tableClass"
        :data="tableData"
        style="width: 100%"
        :height="tableHeight"
        border
      >
        <el-table-column label="No" type="index" width="60"/>
        <el-table-column prop="indexTitle" label="名称"/>
        <el-table-column prop="indexContent" label="描述"/>
        <el-table-column prop="indexSort" label="排序"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick('编辑',scope.row)">修改</el-button>
            <el-button link type="danger" plain size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle">
      <el-form ref="formRules" label-width="120px" :model="form" :rules="formRules">
        <el-form-item label="行业名称" prop="indexTitle">
          <el-input v-model="form.indexTitle" style="width:240px"></el-input>
        </el-form-item>
        <el-form-item label="行业描述">
          <el-input v-model="form.indexContent" type="textarea" style="width:240px"></el-input>
        </el-form-item>
        <el-form-item label="绑定产品" prop="tradeId" v-if="dialogTitle !== '新增'">
          <el-checkbox-group v-model="form.tradeId">
            <el-checkbox
              v-for="item in checkBoxList"
              :label="item.id"
              :key="item.id"
            >{{item.indexTitle}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="上传背景图片" class="uploadimage">
            <upload-imgs
              :queryId="queryId"
              ref="uploadEle"
              :rules="rules"
              :imageFileList="imageFileList"
              @setForm="getBannerForm"
            />
          </el-form-item>
        <el-form-item label="排序" prop="indexSort">
          <el-input v-model="form.indexSort" style="width:120px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <el-image-viewer
      hide-on-click-modal
      @close="()=>{showViewer = false}"
      v-if="showViewer && viewFileList.length>0"
      :url-list="viewFileList"
      :initial-index="0"
    />
  </div>
</template>

<script>
import {
  menuGetModuleContent,
  deleteMenu,
  addOrUpdateMenu,
  updateSolution,
  getTradeStatus
} from "@/api/PC-Home.js";
import { ElMessage, ElMessageBox } from "element-plus";
import UploadImgs from "@/components/UploadImg/index.vue";
export default {
  name: "ImgsUploadStage",
  components: {UploadImgs},
  data() {
    return {
      form: {
        indexTitle: "",
        indexSort: "",
        indexContent: "",
        tradeId: []
      },
      dialogTitle: "",
      dialogFormVisible: false,
      formLabelWidth: "140px",
      rules: {
        maxSize: 1,
        minWidth: 100,
        minHeight: 100
      },
      tableData: [],
      showViewer: false,
      viewFileList: [],
      queryId: null,
      file: null,
      imageFileList: [],
      // 搜索
      type: "",
      pageConfig: {
        total: 100,
        pageSize: 20,
        pageNum: 1
      },
      tableHeight: 0,
      selectList: [],
      formRules: {
        indexTitle: [
          { required: true, message: "请输入行业名称", trigger: "blur" }
        ],
        tradeId: [{ required: true, message: "请选择产品", trigger: "change" }],
        indexSort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      },
      checkBoxList: [],
    };
  },
  mounted() {
    this.getQueryId();
    this.getTradeManagement();
    this.getProductAll();
    this.tableHeightChange();
  },
  methods: {
    returnImage(url) {
      return process.env.VUE_APP_URL + "/" + url;
    },
    getQueryId() {
      this.queryId = this.$route.query.queryId;
    },
    hanldleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getNews();
    },
    handleCurrentChange(val) {
      this.getTradeManagement(val);
    },
    showBigImage(url) {
      this.viewFileList = [];
      this.showViewer = true;
      this.viewFileList.push(process.env.VUE_APP_URL + "/" + url);
    },
    getBannerForm(value) {
      this.file = value;
    },
    getTradeManagement() {
      let param = {
        id: 201
      };
      menuGetModuleContent(param).then(res => {
        this.tableData = res.data;
      });
    },
    returnType(id) {
      if (!id) return;
      let arr = this.selectList.filter(item => {
        return item.id === id;
      });
      return arr && arr.length > 0 ? arr[0].indexTitle : "";
    },
    getTime(timestamp) {
      if (!timestamp) return;
      let date = new Date(new Date().getTime(timestamp)); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear(),
        M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      // h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
      // m =
      //   date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
      // s =
      //   date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + "-" + M + "-" + D;
    },
    handleClick(str, scope) {
      this.dialogTitle = str;
      this.dialogFormVisible = true;
      this.imageFileList = [];
      this.$nextTick(() => {
        this.$refs.formRules.clearValidate();
      });
      this.file = null;
      if (this.dialogTitle === "新增") {
        // this.getProduct()
        this.dialogFormVisible = true;
        this.form.indexTitle = "";
        this.form.indexContent = "";
        this.form.indexSort = "";
        this.form.id = "";
      } else {
        this.getProduct(scope.id);
        this.dialogFormVisible = true;
        this.form.indexTitle = scope.indexTitle;
        this.form.indexContent = scope.indexContent;
        this.form.indexSort = scope.indexSort;
        this.form.id = scope.id;
        this.imageFileList.push({
          name: scope.indexTitle,
          url: process.env.VUE_APP_URL + "/" + scope.indexImg
        });
        // 获取选项
        // this.getTradeManagement(scope.id);
      }
    },
    submit() {
      this.$refs.formRules.validate(validate => {
        if (validate) {
          // 新增时候
          if (this.dialogTitle === "新增") {
            let file = this.file;
            let formMart = null;
            formMart = new FormData();
            formMart.append("file", file ? file.raw : "");
            formMart.append("indexTitle", this.form.indexTitle);
            formMart.append("indexContent", this.form.indexContent);
            formMart.append("indexSort", this.form.indexSort);
            formMart.append("id", this.form.id ? this.form.id : "");
            formMart.append("parentId", this.queryId);
            addOrUpdateMenu(formMart).then(res => {
              if (res.code === 200) {
                this.$message.success("保存成功");
                this.getTradeManagement();
                this.dialogFormVisible = false;
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            this.form.tradeId.map((item, index) => {
              this.form.tradeId[index] = this.form.id + item;
            });
            let file = this.file;
            let formMart = null;
            formMart = new FormData();
            formMart.append("file", file ? file.raw : "");
            formMart.append("indexTitle", this.form.indexTitle);
            formMart.append("indexContent", this.form.indexContent);
            formMart.append("indexSort", this.form.indexSort);
            formMart.append("id", this.form.id ? this.form.id : "");
            formMart.append("tradeId", this.form.tradeId);
            formMart.append("parentId", this.queryId);
            updateSolution(formMart).then(res => {
              if (res.code === 200) {
                this.$message.success("保存成功");
                this.getTradeManagement();
                this.dialogFormVisible = false;
              } else {
                this.$message.error(res.message);
              }
            });
          }
        }
      });
    },
    handleDelete(item) {
      ElMessageBox.confirm("是否删除该条信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let param = {
            id: item.id
          };
          deleteMenu(param).then(res => {
            if (res.code === 200) {
              ElMessage({
                type: "success",
                message: "删除成功"
              });
              this.getTradeManagement();
            }
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除"
          });
        });
    },
    // 获取产品
    getProductAll() {
      let param = {
        id: 202
      };
      menuGetModuleContent(param).then(res => {
        this.checkBoxList = res.data;
      });
    },
    getProduct(val) {
      this.form.tradeId = [];
      let param = {
        id: val + "202"
      };
      getTradeStatus(param).then(res => {
        let arr = res.data.filter(item => {
          if (item.delFlag === "0") {
            return item;
          }
        });
        arr.map(item => {
          this.form.tradeId.push(item.id);
        });
        this.$nextTick(() => {
          this.$refs.formRules.clearValidate();
        });
      });
    },
    // 表格自定义高度
    tableHeightChange() {
      let clientHeight = document.documentElement.clientHeight;
      this.tableHeight =
        clientHeight -
        document.querySelector(".tableClass").getBoundingClientRect().top -
        140;
    }
  }
};
</script>

    
<style scoped lang="scss">
.lin-wrap {
  .wrap-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .label {
      font-size: 16px;
    }
  }
}
::v-deep .uploadimage {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  .el-form-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .upload-demo {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;

      .el-upload {
        margin-right: 10px;
      }
    }
    .demo-image__preview {
      display: flex;
      flex-direction: row;
    }
  }
}
::v-deep .el-dialog__header {
  display: flex;
  .el-dialog__headerbtn {
    top: 0;
  }
}
::v-deep .el-pagination {
  margin-top: 20px;
}
</style>
